<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="js/animate.css">
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
      }
      .div{
        width: 200px;
        height: 200px;
        background: #b3b3b3;
      }
      .fade-enter-active  {
        /*   transition: all .5s */
        animation: fadeIn 1s;
      }
      .fade-leave-active{
         animation: fadeOut 1s;
      }
     /*  .fade-enter, .fade-leave-to .fade-leave-active in below version 2.1.8 {
       animation: fadeOut 2s;
         opacity: 0
     } */
    </style>
</head>
<body>
<div id="box1" >
    <button @click="btn">btn</button>
    <transition name="fade">
        <div v-if="flag" class="div">this is div</div>
    </transition>
</div>  

<script src="../js/vue.js"></script>
<script type="text/javascript">


    var app1 = new Vue({
        el:"#box1",
        data:{//数据
            flag:true
        },
        methods:{//方法
           btn(){
            if(!this.flag){
                this.flag=true;
            }else{
                 this.flag=false;
            }
           }
        },
        computed:{

        },
        watch:{

        },
        components:{
           
        }
    })

</script>
</body>
</html>